<template lang="html">
  <div class="modal-wrapper">
    <div class="modal-bg"></div>
    <div class="modal">
      <div class="modal-header">
        {{title}}
        <a href="javascript:void(0);" class="close-btn" @click="close()"></a>
      </div>
      <div class="modal-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    params: {
      title: {
        type: String,
        default: ''
      },
      isShow: {
        type: Boolean,
        default: false
      },
      closeFn: {
        type: Function
      }
    }
  },
  data() {
    return {
      title: this.params.title || '',
      closeFn: this.params.closeFn || function() {}
    }
  },
  methods: {
    close() {
      if(typeof this.closeFn === 'function') {
        this.closeFn();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/activity.scss";

// set font-color
@include setFontColor;

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .modal-bg {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($black, 0.4);
    z-index: 1;
  }
  .modal {
    width: px2rem(477);
    position: relative;
    z-index: 2;
    .modal-header {
      width: 100%;
      line-height: px2rem(50);
      color: $white;
      background-color: $green;
      position: relative;
      text-align: center;
      position: relative;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      font-size: px2rem(24);
      .close-btn {
        width: px2rem(37);
        height: px2rem(37);
        position: absolute;
        top: px2rem(-11);
        right: px2rem(-11);
        @include setBackgroundImage("/static/images/activity/close-btn.png");
      }
    }
    .modal-body {
      background-color: $white;
    }
    &:after {
      content: '';
      display: block;
      background-color: $white;
      height: px2rem(35);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }
}
</style>
